<template>
  <view class="category">
    <u-sticky>
      <!-- <u-search @click="toPage(`pet/searchCate?parentId=${type}`)" placeholder="品种关键字" :showAction="false" disabled>
      </u-search> -->
      <view class="header">
        <!-- type 种类 -->
        <view class="type">
          <view class="type-item" :class="current == index ? 'active' : ''" v-for="(item, index) in typeList" :key="index"
            @click="getCate(index, item.id)">
            <text class="f32 iconfontColor" :class="current == index ? item.iconSel : item.icon"></text>
            <text>{{ item.name }}</text>
          </view>
        </view>
        <!-- 热门 -->
        <view class="hot">
          <view class="hot-item" v-for="(item, index) in typeList[current].recommendList" :key="index"
            @click="handleChoose(item)">{{ item.title }}
          </view>
        </view>
      </view>
    </u-sticky>
    <!-- 分类 -->
    <view class="category-b">
      <u-index-list activeColor="#FF5900" :index-list="indexList">
        <view v-for="(item, index) in typeList[current].itemArr" :key="index">
          <u-index-item>
            <u-index-anchor bgColor="transparent" v-if="item && item.length" :text="indexList[index]">
            </u-index-anchor>
            <view class="list-cell" v-for="(cell, cIndex) in item" :key="cIndex" @click="handleChoose(cell)">
              {{ cell.title }}
            </view>
          </u-index-item>
        </view>
      </u-index-list>
    </view>
    <u-loading-page :loading="loading"></u-loading-page>
  </view>
</template>

<script>
import pageMixin from '@/mixins/pageMixin'
// import { getPetCategoryList, getPetCateGroup } from '@/api/pet/pet'

export default {
  mixins: [pageMixin],
  data () {
    return {
      loading: false,
      current: 0,
      type: 2,
      typeList: [
        {
          id: 2,
          name: '猫咪',
          icon: 'icon-cat',
          iconSel: 'icon-cat2',
          itemArr: [],
          loadingType: false
        },
        {
          id: 1,
          name: '狗狗',
          icon: 'icon-dog',
          iconSel: 'icon-dog2',
          itemArr: [],
          loadingType: false
        },
        {
          id: 3,
          name: '异宠',
          icon: 'icon-other',
          iconSel: 'icon-other2',
          itemArr: [],
          loadingType: false
        },
      ],
      hotList: [
        {
          id: 1,
          name: '金毛'
        },
        {
          id: 2,
          name: 'da金毛'
        },
      ],
      indexList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ],
      queryParams: {
        pageEnable: 1,
        pageNum: 1,
        pageSize: 10,
        parentId: 1
      },
      queryGroup: {
        pageEnable: 1,
        pageNum: 1,
        pageSize: 10,
        parentId: 1
      }
    };
  },
  methods: {
    async getCate (index = 0, id) {
      this.current = index
      if (this.typeList[this.current].loadingType) return
      this.type = id
      this.loading = true
      // let res = await getPetCateGroup(this.type)
      // let res2 = await getPetCategoryList({
      //   pageEnable: 1,
      //   pageNum: 1,
      //   pageSize: 10,
      //   parentId: this.type,
      //   recomFlag: 1
      // })
      this.loading = false
      this.typeList[this.current].loadingType = true
      // this.typeList[this.current].itemArr = res.itemArr
      // this.typeList[this.current].recommendList = res2.list
      uni.pageScrollTo({
        scrollTop: 0
      });
    },
    handleChoose (item) {
      let params = {
        catalog: this.type,
        subCatalog: item.id,
        subCatalogName: item.title
      }
      uni.$emit('category', params)
      this.back()
    }
  },
  onLoad () {
    this.getCate(this.current, this.type)
  }
};
</script>

<style lang="scss" scoped>
page {
  background: #ffffff;
}

::v-deep .u-sticky__content {
  background-color: transparent !important;
}

::v-deep .u-index-list__letter {
  z-index: 999;
}

.category {
  box-sizing: border-box;
  padding: 12rpx 32rpx;

  .header {
    .type {
      margin-top: 28rpx;
      display: flex;
      justify-content: space-between;

      &-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 218rpx;
        height: 96rpx;
        font-size: 28rpx;
        color: #FF941A;
        background: rgba($color: #FF941A, $alpha: 0.1);
        border-radius: 32rpx;

        .f32 {
          font-size: 40rpx;
          margin-right: 24rpx;
        }

        &.active {
          color: #ffffff;
          background: linear-gradient(135deg, #FF941A 0%, #FF941A 100%);
        }

        &:nth-child(2) {
          color: #5c8cff;
          background: rgba($color: #5c8cff, $alpha: 0.1);

          &.active {
            color: #ffffff;
            background: linear-gradient(135deg, #5a8bff 0%, #8aabff 100%);
          }
        }

        &:nth-child(3) {
          color: #FF5900;
          background: rgba($color: #FF5900, $alpha: 0.1);

          &.active {
            color: #ffffff;
            background: linear-gradient(135deg, #FF5900 0%, #FF5900 100%);
          }
        }
      }
    }

    .hot {
      margin-top: 48rpx;
      margin-bottom: 48rpx;

      &-item {
        margin-right: 16rpx;
        display: inline-block;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1a1a1a;
        padding: 0 32rpx;
        height: 56rpx;
        line-height: 56rpx;
        background: #f5f5f5;
        border-radius: 37rpx;
      }
    }
  }

  .list-cell {
    height: 96rpx;
    line-height: 96rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1a1a1a;
    border-bottom: 1rpx solid #e6e6e6;
  }

  // .category-b{
  //    overflow: auto;
  //  height: calc(100vh - 380rpx) !important;
  //  // margin-bottom: 380rpx;
  //  // overflow: hidden;
  // }
}

.u-index-item .list-cell:last-child {
  border-bottom: none;
}

::v-deep .u-sticky__content {
  background-color: #f8f8f8;
}
</style>
